<template>
  <!-- vue全屏滚动 -->
  <!-- 使用方法：安装vue-fullpage，until中放入VueFullpage.js， main.js中引入 -->
  <!-- 如出现空白页时是因为数据还没加载完就渲染了v-fullpage，数据请求成功后在最外层加个 v-if展示判断 -->
  <div class="fullPage">
    <!-- 滚动区域容器 -->
    <!-- 微信里 -->
    <div class="fullpage-container">
      <div class="fullpage-wp" v-fullpage="opts" v-if="isFullPage">
        <div class="page pageFirst">
          <img class="pageBanner" :src="reportBg1" />
          <div class="dataCont">
            <p>第一页</p>
          </div>
        </div>
        <div class="page">
          <img class="pageBanner" :src="reportBg2" />
          <div class="dataCont">
            <p>第二页</p>
          </div>
        </div>
        <div class="page">
          <img class="pageBanner" :src="reportBg3" />
          <div class="dataCont">
            <p>第三页</p>
          </div>
        </div>
        <div class="page">
          <img class="pageBanner" :src="reportBg4" />
          <div class="dataCont">
            <p>第四页</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动区域容器 -->
  </div>
</template>

<script>
import "vue-fullpage/vue-fullpage.css";
import "@/assets/css/pages/fullpage.scss";
import Vue from "vue";
export default {
  name: "vuefullPage",
  components: {},
  data() {
    return {
      isFullPage: true, //page里加v-if判断时避免空白页，请求接口完成后渲染页data-id按顺序排列
      opts: {
        start: 0,
        loop: false,
        duration: 500,
        stopPageScroll: true,
        loopHorizontal: true,
        beforeChange: function (prev, next) {},
        afterChange: function (prev, next) {},
      },
      //上下滑动大背景
      reportBg1: require("@/assets/imgs/reportBg1.png"),
      reportBg2: require("@/assets/imgs/reportBg2.png"),
      reportBg3: require("@/assets/imgs/reportBg3.png"),
      reportBg4: require("@/assets/imgs/reportBg4.png"),
    };
  },
  mounted() {
    let that = this;
  },
  watch: {},
  methods: {},
};
</script>
<style scoped lang="less">
.fullpage-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fullPage {
  height: 100%;
}
.page {
  .dataCont {
    position: absolute;
    top: 10%;
    left: 7%;
  }
}
</style>
